<template>

	<view class="container" style="background-color: #fff;min-height: 100vh;">

		<view class="fix-top">
			<st-navigation title="设计师店铺" :goHome="goHome"></st-navigation>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #f7f7f7;"></view>
		<view class="designer " ref="designer" style="position: relative;">
			<view class="designer-item" style="margin-top: 10rpx;">
				<view class="designer-item-info">
					<!-- <StAvatar :designer="designer" propWidth='180' propHeight='180'></StAvatar> -->
					<view class="designer-avatar" style="width: 160rpx;height: 160rpx;">
						<image style="width: 160rpx;height: 160rpx;"
							:src="$wanlshop.ossYSM(designer.avatar, 64, 64, 2, 'avatar')"></image>
						<view class="designer_level" style="width: 160rpx;font-size: 18rpx;">
							{{ designer.designer_level }}
						</view>
					</view>
					<!-- <image class="designer-avatar" :src="$wanlshop.ossYSM(designer.avatar, 60, 60, 2, 'avatar')"></image> -->
					<view class="designer-info">
						<view class="left" style="margin-top: 20rpx;">
							<view class="designer-desc">
								<view class="designer-name d-flex a-center">
									<view class="font-weight" style="color: #333333;font-size: 32rpx;">
										{{ designer.username || designer.nickname }}
									</view>
									<view class="designer-online " :class="{ online: designer.is_online == 1 }">{{ designer.is_online == 0 ?
										'离线' : '在线' }}</view>
								</view>
								<view class="designer-desc-item">
									<image src="../../static/images/ysmDesignerShop/icon-2.png"></image>
									设计费: {{ designer.work_salary }}元/㎡
								</view>
								<view class="designer-desc-item" style="margin-top: 10rpx;">
									<image src="../../static/images/ysmDesignerShop/icon-1.png"></image>
									已服务产值: {{ designer.service_num }}
								</view>
							</view>
						</view>

						<view class="right" style="margin-top: 30rpx;">
							<view class="label" style="height: 30rpx;line-height: 30rpx;font-size: 22rpx;">总预约量</view>
							<view class="number"
								style="height: 48rpx;line-height: 48rpx;font-size: 40rpx;font-weight: bold;">
								{{ designer.total_bookings }}
							</view>
						</view>
					</view>


				</view>
				<!-- <view class="d-flex a-center j-sb" style="margin-top: 24rpx;">
					<view class="designer-name d-flex a-center">
						<view class="font-weight" style="color: #333333;font-size: 32rpx;">
							{{ designer.username || designer.nickname }}
						</view>
						<view class="designer-online " :class="{ online: designer.is_online == 1 }">{{ designer.is_online == 0 ?
							'离线' : '在线' }}</view>
					</view>
				</view> -->
				<!-- 专业特长 -->
				<view class="designer-speciality"
					style="margin-top: 20rpx;display: flex;justify-content: space-between;">
					<view class="label tag"
						style="padding: 5rpx 0;text-align: left;background: url('https://www.ysmll.cn/uploads/20240622/d711fd58322b492756d4d24e5346dc95.jpg') no-repeat center;background-size: 100% 100%;width: 140rpx;">
						<text style="font-size: 18rpx;margin-left: 15rpx;">设计理念</text>
					</view>
					<view class="designer-speciality-item" style="color: #808080;margin-left: 16rpx;">
						{{ designer.good_at }}
					</view>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;border-bottom: 1px solid #E6E6E6;position: relative;padding-bottom: 10rpx;">
			<text
				style="padding-bottom: 10rpx;border-bottom: 2px solid #FC2B55;font-weight: bold;font-size: 30rpx;color: #333333;">个人介绍</text>
		</view>
		<view @click="toIntroduce(designer)" class="position-relative designer" v-if="designer.intro_cover"
			style="border-radius: 8rpx;text-align: center;padding-bottom: 10rpx;border-bottom: 1px solid #E6E6E6;">
			<view style="padding: 16rpx 32rpx 10rpx 32rpx;">
				<view style="background-color: #000;height: 220rpx;">
					<image :src="designer.intro_cover" mode="aspectFit"
						style="border-radius: 8rpx;height: 220rpx;width: 100%;"></image>
				</view>
			</view>
			<image class="position-absolute"
				style="right: 50%;top: 50%;width: 64rpx;height: 64rpx;transform: translateX(32rpx) translateY(-32rpx);"
				src="/static/images/ysmHome/Group.png" mode=""></image>
		</view>

		<!-- v-if="wanlLogin.token" -->
		<!-- <view class="d-flex a-center j-center" style="height: 80rpx; margin:32rpx 78rpx;border-radius:8rpx ;"
			:class="isAtten===0?'attention':'noattention'" @click='goAtten'>
			<text v-if="isAtten===0"
				style="color: white;font-size: 28rpx;font-weight: 600;letter-spacing: 2rpx;">+关注</text>
			<text v-else style="color: #28272d;font-size: 28rpx;font-weight: 600;letter-spacing: 2rpx;">已关注</text>
		</view> -->
		<view class="tab-item-box">
			<view class="tab-item1" @click="selectItem(index)" v-for="(item,index) in ['案例','工地','活动','评价']">
				<text :class="activeIndex===index?'active1':'active0'" style="padding: 4rpx 0;">
					{{item}}
				</text>
				<text
					style="font-weight: normal; color: #808080;font-size: 22rpx;display: inline;">({{counts[index]}})</text>
			</view>
		</view>

		<!-- 实景案例 -->
		<view class="" style="margin-top: 8rpx;">
			<PanoramicVideo v-if="activeIndex===0" :dataSource="designer.video" :intro_current="intro_current"
				:intro_data="intro_data" :intro_current_index="intro_current_index" :isEmpty="videoEmpty" />
			<SiteLive v-if="activeIndex===1" :isEmpty="broadcastEmpty" :dataSource="designer.broadcast" />
			<SalesPromotion v-if="activeIndex===2&&isShow" :isEmpty="activityEmpty" :dataSource="designer.activity" />
			<CustomerEvaluation v-if="activeIndex===3" :isEmpty="commentEmpty" :dataSource="designer.comment" />
		</view>

		<!-- 个人介绍 -->
		<!-- <view class="introduction">
			<view class="introduction-item">
				<view class="introduction-title">
					<text>个人介绍</text>
				</view>
				<view class="introduction-video">
					<video v-if="designer.intro_type === 'video' || designer.intro_type == 1" id="myVideo" class="video"
						:src="designer.intro" enable-danmu danmu-btn controls></video>

					<image v-if="designer.intro_type === 'image' || designer.intro_type == 2" :src="designer.intro"
						mode="aspectFill"></image>
				</view>
			</view>
		</view> -->

		<!-- <view v-if="isFixed" class="tabs fixed-tabs" :style="fixTop">
			<view class="tabs-item" v-for="(item, index) of tabsConfig" :key="index" @click="changeTab(item)">
				<text :class="{ active: item.id == activeTab }">{{ item.name }}</text>
			</view>
		</view>
		<view v-else class="tabs">
			<view class="tabs-item" v-for="(item, index) of tabsConfig" :key="index" @click="changeTab(item)">
				<text :class="{ active: item.id == activeTab }">{{ item.name }}</text>
			</view>
		</view> -->


		<view class="" style="height: 80rpx;">

		</view>
		<view class="actions" style="padding-bottom: env(safe-area-inset-bottom);">
			<view class="btn" @click="contactHim" style="background-color: rgba(76, 125, 217, 1);font-size: 32rpx;">立刻沟通
			</view>
			<view class="btn" @click="handleToYsmFillAppointment"
				style="background-color: rgba(253, 105, 5, 1);font-size: 32rpx;">预约TA

			</view>
		</view>
		<!-- showUnfollow   @close="close" @open="open"-->
		<u-popup round='16' bgColor="#f5eff8" @close="closeUnfollow" :closeable='true' :show="showUnfollow">
			<view style="height: 20vh;" class="d-flex flex-column mx-3 mt-5">
				<view class="d-flex flex-column" style="gap: 16rpx;">
					<text class="font-weight"
						style="font-size: 30rpx;letter-spacing: 5rpx;">{{ designer.username || designer.nickname }}</text>
					<text class="  text-light-muted"
						style="font-size: 20rpx;letter-spacing: 4rpx;">{{ designer.good_at }}</text>
				</view>
				<view class=" rounded-sm bg-white mt-3">
					<u-cell arrow-direction="down" @click="unfollow">
						<view slot="title" class="">
							<text style="color: red;font-weight:bold;letter-spacing: 5rpx;">取消关注</text>
						</view>
						<view class="" slot="right-icon" style="transform:rotate(90deg) ;">
							<u-icon name="minus-circle-fill" color="red"></u-icon>
						</view>
					</u-cell>
				</view>
			</view>
		</u-popup>
		<u-popup round='8' :show="showContactHim" @close="close" mode='center'>
			<view class="d-flex flex-column a-center j-center" style="width:80vw;height: 400rpx;gap: 30rpx;">
				<view class="d-flex flex-column a-center" style="gap: 10rpx;">
					<text style="color: #4c7dd9;font-weight: bold;font-size: 30rpx;">18816507885</text>
					<text style="" class="text-light-muted">联系设计师</text>

				</view>
				<view class="d-flex flex-column" style="gap: 10rpx;">
					<view class="rounded-ssm d-flex a-center j-center" @click="submit"
						style="background-color:#4c7dd9;width: 70vw;height: 70rpx;">
						<text style="color: white;">确认呼叫</text>
					</view>
					<view class=" d-flex a-center j-center" @click="showContactHim=false"
						style="width: 70vw;height: 70rpx;">
						<text>取消呼叫</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import PanoramicVideo from './components/PanoramicVideo.vue';
	import SiteLive from './components/SiteLive.vue';
	import SalesPromotion from './components/SalesPromotion.vue';
	import CustomerEvaluation from './components/CustomerEvaluation.vue';
	import StAvatar from '../../components/st-avatar/st-avatar.vue';

	export default {
		components: {
			PanoramicVideo,
			SiteLive,
			SalesPromotion,
			CustomerEvaluation,
			StAvatar
		},

		//下拉刷新
		onPullDownRefresh() {
			if (this.activeIndex == 3) {
				if (!this.commentReuqest.isLoading) return
				this.commentReuqest.page = 1;
				this.commentReuqest.isHasNext = true
				this.getDesignerInfo(this.designerId, 'comment');
				return
			}

			uni.stopPullDownRefresh();


		},
		//上拉加载
		onReachBottom() {
			if (this.activeIndex == 3) {
				if (!this.commentReuqest.isHasNext) {
					return;
				}
				if (this.commentReuqest.isLoading) return
				this.commentReuqest.page++
				this.getDesignerInfo(this.designerId, 'comment');
			}
			uni.stopPullDownRefresh();

		},


		data() {
			return {
				showUnfollow: false,
				showContactHim: false,
				isAtten: 0,
				activeIndex: 0,
				fixTop: 0,
				isShow: false,
				isFixed: false,
				designerId: '',
				is_scroll: true,
				wanlLogin: {},
				goHome:false,
				designer: {
					/* avatar: '../../static/images/ysmHome/avatar-1.png',
					name: '张三' */
				},
				tabsConfig: [{
						id: 'video',
						name: '实景案例',
					},
					{
						id: 'broadcast',
						name: '在线工地',
					},
					{
						id: 'activity',
						name: '促销活动',
					},
					{
						id: 'comment',
						name: '客户评价',
					}
				],
				activeTab: 'video',

				videoEmpty: false,
				broadcastEmpty: false,
				activityEmpty: false,
				commentEmpty: false,
				video_height: 0,
				broadcast_height: false,
				activity_height: false,
				comment_height: false,
				data: [],
				current_index: 0,
				current: {},
				intro_data: [],
				intro_current_index: 0,
				intro_current: {},
				counts: [0, 0, 0, 0],
				commentReuqest: {
					isLoading: true,
					isHasNext: true,
					page: 1
				}

			};
		},
		onShow() {
			this.wanlLogin = uni.getStorageSync("wanlshop:user");
			if (this.wanlLogin.token) {
				this.$api.post({
					url: `/wanlshop/subscribe/isSubscribe?design_id=${this.designerId}`,
					success: res => {
						this.isAtten = res.is_subscribe
					},
					error: err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			}
			let id = this.designerId;
			this.getDesignerInfo(id, 'basic');
			this.getDesignerInfo(id, 'video');
			this.getDesignerInfo(id, 'activity');
			this.getDesignerInfo(id, 'broadcast');
			this.getDesignerInfo(id, 'comment');
			this.getDesignerInfo(id, 'counts');
		},
		onLoad(option) {
			let id = option.shop_id;
			this.designerId = id;
			if(option.dataSouce){
				let data = JSON.parse(decodeURIComponent(option.dataSouce));
				this.data = data;
				this.intro_data = data;
				
				if(data && data.length > 0){
					for(var i = 0; i<data.length-1; i++){
						var m1 = data[i]
						if (!m1.user_id){
							m1.user_id = m1.id
						}
						if (!option.current){
							if(m1.user_id == this.designerId){
								this.current = m1
								this.intro_current = m1
								this.current_index = i;
								this.intro_current_index = i;
								break
							}
						}
						
					}
				}
			}
			if(option.current){
				this.current = JSON.parse(decodeURIComponent(option.current));
				this.intro_current = JSON.parse(decodeURIComponent(option.current));
			}
			if (option.current_index){
				this.current_index = option.current_index;
				this.intro_current_index = option.current_index;
			}
			if (option.goHome){
				this.goHome = option.goHome
			}
	
						
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			this.getDesignerInfo(id, 'basic');
			this.getDesignerInfo(id, 'video');
			this.getDesignerInfo(id, 'activity');
			this.getDesignerInfo(id, 'broadcast');
			this.getDesignerInfo(id, 'comment');
			this.getDesignerInfo(id, 'counts');

			uni.hideLoading();
		},
		onPageScroll(res) {
			if (this.is_scroll == true) {
				let common_height = 347;

				let video_height = this.video_height;
				let broadcast_height = this.broadcast_height;
				let activity_height = this.activity_height;
				let comment_height = this.comment_height;
				let scroll_top = res.scrollTop;
				let one = common_height + video_height;
				let two = common_height + video_height + broadcast_height;
				let three = common_height + video_height + broadcast_height + activity_height;
				let four = common_height + video_height + broadcast_height + activity_height + comment_height;
				//console.log(scroll_top,one,two,three,four);
				if (scroll_top > 0 && scroll_top < common_height) {
					this.isFixed = false;
					this.activeTab = 'video';
				} else if (scroll_top >= common_height && scroll_top < one) {
					this.activeTab = 'video';
					this.isFixed = true;

				} else if (scroll_top >= one && scroll_top < two) {
					//console.log(scroll_top,'this.activeTab = broadcast');
					this.activeTab = 'broadcast';
				} else if (scroll_top >= two && scroll_top < three) {
					//console.log(scroll_top,'this.activeTab = activity');
					this.activeTab = 'activity';
				} else if (scroll_top >= three && scroll_top < four) {
					//console.log(scroll_top,'this.activeTab = comment');
					this.activeTab = 'comment';
				}
			}
		},
		mounted() {
			setTimeout(() => {
				this.scrollToBottom();
				this.isShow = true;
			}, 1000)
		},
		onShareAppMessage(){
			var url1 = '/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=' + this.designerId+'&goHome=true'
			url1 = url1 + '&dataSouce='+ encodeURIComponent(JSON.stringify(this.data))
			
			let shareobj = {
				title: '鱼水猫', 
				path: url1 
			}
			return shareobj
			
		},
		methods: {
			unfollow() {
				uni.showLoading({
					title: '取消关注...'
				})
				this.$api.get({
					url: `/wanlshop/subscribe/cancelSubscribe?design_id=${this.designerId}`,
					success: res => {
						uni.hideLoading()
						this.showUnfollow = false
						this.isAtten = 0
					},
					error: err => {
						uni.hideLoading()
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			closeUnfollow() {
				this.showUnfollow = false
			},
			close() {
				this.showContactHim = false
			},
			goAtten() {
				if (!this.wanlLogin.token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pagesYSM/ysmMy/auth/auth'
						})
					}, 200)
				} else {
					if (this.isAtten === 1) {
						this.showUnfollow = true
						// return uni.showToast({
						// 	title: "已关注",
						// 	icon: 'none'
						// })
					} else {
						uni.showLoading({
							title: '关注中...'
						})
						this.$api.get({
							url: `/wanlshop/subscribe/doSubscribe?design_id=${this.designerId}`,
							success: res => {
								uni.hideLoading()
								setTimeout(() => {
									this.isAtten = res.is_success
								}, 100)
							},
							error: err => {
								uni.hideLoading()
								uni.showToast({
									title: err.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			},

			toIntroduce(item) {
				if (item.intro_type === 2) {
					return
				}
			
				var data = uni.getStorageSync('dataSource'); 
				var dataSource = JSON.parse(decodeURIComponent(data))
				console.log('tiaoxhuan',dataSource)
				// let current_index = this.current_index;
				// let current = encodeURIComponent(JSON.stringify(this.current));
				// console.log("current:", current);
				// console.log("current_index:", current_index);
				// console.log(",data:", this.data);

				var current_index = 0
				var current0 = {}
				if (dataSource.length > 0) {
					for (var i = 0; i < dataSource.length; i++) {
						var model = dataSource[i]
						if(model.id == this.designerId){
							current_index = i
							current0 = {
								id: model.id,
								user_id: model.id,
								title: model.good_at
							
							}
							break
						}
						
					}
				}

				var current = encodeURIComponent(JSON.stringify(current0));
				uni.navigateTo({
					url: `/pages/ysmIntroduceVidoe/ysmIntroduceVidoe?current=${current}&dataSouce=${data}&current_index=${current_index}`
				});

			},
			preview(videoItem) {
				console.log(videoItem)
			},
			selectItem(index) {
				this.activeIndex = index
			},
			scrollToBottom: function() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.in(this).select('.video').boundingClientRect();
				query.in(this).select('.activity').boundingClientRect();
				query.in(this).select('.broadcast').boundingClientRect();
				query.in(this).select('.comment').boundingClientRect();
				query.in(this).select('.fix-top').boundingClientRect();
				query.exec((res) => {
					that.video_height = res[0].height;
					that.activity_height = res[1].height;
					that.broadcast_height = res[2].height;
					that.comment_height = res[3].height;
					that.fixTop = "top:" + res[4].height + "px";
					console.log('res[4].height', res[4].height);
				})
			},
			async loadPageData(shop_id) {
				this.$api.get({
					url: '/wanlshop/user/getDesignerDetail',
					data: {
						id: shop_id
					},
					success: res => {
						console.log(res);
						this.designer = res;
					}
				});
			},
			changeTab(item) {
				let that = this;
				this.activeTab = item.id;
				this.is_scroll = false;
				if (item.id == 'video') {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 1000,
						success() {
							that.is_scroll = true;
						}
					})
				} else if (item.id == 'broadcast') {
					this.isFixed = true;
					uni.pageScrollTo({
						scrollTop: 347 + this.video_height,
						duration: 1000,
						success() {
							that.is_scroll = true;
						}
					})
				} else if (item.id == 'activity') {
					this.isFixed = true;
					uni.pageScrollTo({
						scrollTop: 347 + this.video_height + this.broadcast_height,
						duration: 1000,
						success() {
							that.is_scroll = true;
						}
					})
				} else if (item.id == 'comment') {
					this.isFixed = true;
					uni.pageScrollTo({
						scrollTop: 347 + this.video_height + this.broadcast_height + this.activity_height,
						duration: 1000,
						success() {
							that.is_scroll = true;
						}
					})
				}


			},
			handleToYsmFillAppointment() {
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmFillAppointment?fromurl_id=${this.designerId}&fromurl=ysmDesignerShop&designer_id=${this.designerId}&designer=${encodeURIComponent(JSON.stringify(this.designer))}`
				});
			},
			getDesignerInfo(id, type) {
				var params = {
					id: id,
					type
				}
				if (type == 'comment') {
					this.commentReuqest.isLoading = true
					params.page = this.commentReuqest.page

				}
				this.$api.get({
					url: '/wanlshop/user/getDesignerInfo',
					data: params,
					success: res => {
						this.commentReuqest.isLoading = false
						uni.stopPullDownRefresh()
						if (type === 'basic') {
							this.designer = {
								...this.designer,
								...res,
							};
						} else if (type === 'counts') {
							this.counts = res;
						} else {
							if (type === 'comment') {
								if (params.page == 1) {
									if (res.length === 0) {
										this[`${type}Empty`] = true;
									}
									this.$set(this.designer, type, res);
								} else {
									var arr = this.designer.comment.concat(res)
									if (res.length == 0) {
										this.commentReuqest.isHasNext = false
									}
									console.log('数组', arr)
									this.$set(this.designer, type, arr);
								}
							} else {
								this.$set(this.designer, type, res);
								if (res.length === 0) {
									this[`${type}Empty`] = true;
								}
							}



						}
						/* let options = {
							basic: () => {
								this.designer = res;
							},
							activity: () => {
								this.designer.activity = res;
							},
							video: () => {},
							broadcast: () => { },
							comment: () => { },
						};
						if (options[type]) {
							options[type]();
						} */
					},
					fail: err => {
						this.commentReuqest.isLoading = false
					}
				});
			},
			submit() {
				uni.makePhoneCall({
					phoneNumber: "18816507885"
				})
				this.showContactHim = false
			},
			contactHim() {
				this.showContactHim = true

				// uni.navigateTo({
				// 	url: `/pages/kefu/kefu`
				// })
			}
		}
	}
</script>

<style lang="less" scoped>
	.tab-item-box {
		width: 100vw;
		padding: 16rpx 0rpx 8rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E6E6E6;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.tab-item1 {
			color: #808080;
			font-size: 30rpx;
			margin-left: 28rpx;
			margin-right: 28rpx;
		}

		.active1 {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			border-bottom: 2px solid #FC2B55;
		}

		.active0 {
			border-bottom: 2px solid rgba(0, 0, 0, 0);
		}

	}


	.designer-avatar {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		z-index: 0;
		font-size: 6rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;

		}

		.designer_level {
			position: absolute;
			z-index: 0;
			left: 0;
			bottom: 0;
			width: 64rpx;
			height: 20rpx;

			/* 缩小元素大小为原来的一半 */
			padding-top: 4rpx;
			text-align: center;
			background-color: rgba(196, 10, 10, 0.7);
			color: #fff;
		}
	}

	.attention {
		background-color: #FC2B55;
	}

	.noattention {
		background-color: #f1f1f1;
	}



	.designer-online {
		font-weight: 400;
		font-size: 20rpx;
		line-height: 34rpx;
		color: #818181;
		background: #E7E7E7;
		border-radius: 4px;
		padding: 2rpx 8rpx;
		margin-left: 16rpx;
		position: relative;
		white-space: nowrap;

		&::before {
			content: '';
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #818181;
			border-radius: 50%;
			margin-right: 8rpx;
		}

		&.online {
			background: #E0FAD9;
			color: #76BD53;

			&::before {
				background: #6BC54A;
			}
		}
	}

	.activity,
	.broadcast {
		margin-bottom: 20rpx;
	}

	.fixed-tabs {
		position: fixed;
		left: 0;
		top: 150rpx;
		z-index: 2;
		width: 100%;
		height: 68rpx;
		margin-top: 0 !important;
		background-color: #F7F7F7;
	}

	.tag {
		background: #759AE1;
		color: #fff;
		padding: 2rpx 16rpx 2rpx 0rpx;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 27rpx;
		position: relative;
		// min-width: 70rpx;
		text-align: center;

		&::after {
			content: '';
			width: 0;
			height: 0;
			// background: #759AE1;
			position: absolute;
			right: -2rpx;
			top: 50%;
			transform: translateY(-50%);
			border: 20rpx solid transparent;
			border-right-color: #fff;
		}
	}

	.designer {
		.designer-item {
			// margin-top: 16rpx;
			// background-color: #fff;
			padding: 24rpx 32rpx 10rpx 32rpx;
		}

		/deep/ .designer-item-info {
			display: flex;

			// align-items: center;
			// margin-top: 72rpx;
			.designer-avatar {
				width: 140rpx;
				height: 140rpx;

				.designer_level {
					height: 42rpx;
				}
			}

			.designer-info {

				width: calc(100% - 160rpx);
				padding-left: 24rpx;
				display: flex;
				font-size: 20rpx;

				// align-items: center;
				.left {
					width: calc(100% - 208rpx);
				}

				.right {
					width: 208rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					// justify-content: center;

					.label {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #818181;
					}

					.number {
						font-weight: 600;
						font-size: 40rpx;
						line-height: 56rpx;
						color: #1D76C6;
					}

					.link {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 34rpx;
						color: #1D76C6;
						margin-top: 12rpx;
					}
				}

				.designer-name {
					font-weight: 600;
					font-size: 32rpx;
					// line-height: 50rpx;
					color: #333333;
					display: flex;
					align-items: center;
					margin-bottom: 5px;

					.designer-online {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 34rpx;
						color: #818181;
						background: #E7E7E7;
						border-radius: 4px;
						padding: 2rpx 8rpx;
						margin-left: 16rpx;
						position: relative;
						white-space: nowrap;

						&::before {
							content: '';
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							background: #818181;
							border-radius: 50%;
							margin-right: 8rpx;
						}

						&.online {
							background: #E0FAD9;
							color: #76BD53;

							&::before {
								background: #6BC54A;
							}
						}
					}
				}

				.designer-desc {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #818181;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 24rpx;
					// margin-top: 10rpx;

					.designer-desc-item {
						height: 28rpx;
						line-height: 28rpx;
						display: flex;
						align-items: center;
						// margin-top: 5rpx;

					}

					.designer-desc-item:nth-child(2) {
						margin-top: 16rpx;
						line-height: 28rpx;
						height: 28rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
				}
			}
		}

		.designer-speciality {
			margin-top: 20rpx;
			display: flex;
			align-items: flex-start;

			.label {
				color: #fff;
			}

			.designer-speciality-item {
				width: 100%;
				// margin-left: 10rpx;
				font-size: 24rpx;
				color: #808080;
				line-height: 34rpx;

			}
		}

		.designer-activity {
			border-top: 1rpx dashed #aaaaaa;

			margin-top: 20rpx;
			padding-top: 20rpx;
			display: flex;
			align-items: flex-start;

			.label {
				margin-right: 12rpx;
				color: #fff;
				width: 124rpx;


				&.tag {
					background: #FD9A00;
				}
			}

			.designer-activity-item {
				width: calc(100% - 120rpx);
			}
		}

		.designer-speciality-item,
		.designer-activity-item {
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #333333;
			// 超出一行...
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
		}
	}

	.introduction {
		background: #fff;
		padding-top: 5rpx;

		.introduction-title {
			border-bottom: 1px solid #F2F2F2;
			height: 46rpx;

			text {
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #FD5204;
				background: url('../../static/images/ysmDesignerShop/bg-1.png') no-repeat;
				background-size: contain;
				padding: 10rpx 50rpx 10rpx 20rpx;
			}
		}

		.introduction-video {
			padding: 20rpx 48rpx;
			width: 100%;
			height: 296rpx;

			.video {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.tabs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		text-align: center;
		margin: 10rpx 0;

		padding: 20rpx 0;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #333333;

		.tabs-item {}

		.active {
			color: #FD5204;
			border-bottom: 2rpx solid #FD5204;
			padding-bottom: 2rpx;
		}
	}

	.tabs-content {
		padding-bottom: 128rpx;

		/deep/ .c-wrap {
			margin-bottom: 20rpx;

			/* &:nth-last-child(1) {
				margin-bottom: 0;
			} */
			&.video {
				.content {
					padding: 0 32rpx 32rpx;
				}
			}

		}
	}

	.actions {
		position: fixed;
		left: 48rpx;
		right: 48rpx;
		bottom: 40rpx;
		z-index: 2;
		// width: 100%;
		display: flex;
		gap: 38rpx;
		// justify-content: space-evenly;
		color: #fff;
		// padding: 10rpx 0;
		// background-color: #fff;

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			width: 308rpx;
			text-align: center;
			border-radius: 40px;
		}

		:nth-child(1) {
			background-color: #FF6A03;
		}

		:nth-child(2) {
			background-color: #4C7DD9;
		}
	}

	/deep/ .watch {
		bottom: 10rpx !important;
	}
</style>